<template>

  <div class="wrapper">
    <div class="left">
      <Card>
        <div slot="cardHeader">指标列表</div>
        <div slot="cardBody">
          <div>
            <span class="span-style">指标类别</span>
            <el-select v-model="indicators" clearable filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!--          表格区域-->
          <div style="margin-top: 20px">
            <indicator-list />
          </div>
        </div>
      </Card>
    </div>
    <div class="right">
      <div class="right-bottom">
        <Card>
          <div slot="cardHeader">科室/医生目标值</div>
          <div slot="cardBody">
            <div class="btns">
              <el-radio v-model="radio" label="1">医生目标</el-radio>
              <el-button size="mini" type="primary">新增</el-button>
              <el-button size="mini" type="success">保存</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </div>
            <div class="target">
              <department-target />
            </div>

          </div>
        </Card>
      </div>

    </div>
  </div>
</template>

<script>
import Card from '../../childComps/card/Card'
import IndicatorList from './tables/IndicatorList'
import DepartmentTarget from './tables/DoctorTarget'
export default {
  name: 'DoctorSetting',
  components: {
    Card,
    IndicatorList,
    DepartmentTarget
  },
  data() {
    return {
      // 指标类别
      indicators: '',
      // 指标选择
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      // 全院指标
      floorIndicator: '',
      // 科室目标
      radio: '1'
    }
  }
}
</script>

<style scoped lang="scss">
  body{
    width: 100%;
    height: 100%;
  }
  /deep/.el-radio__label{
    font-size: 12px;
  }
  .span-style{
    padding-right: 20px;
  }
  .el-button{
    margin-left: 20px;
  }
  .wrapper{
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
    .left{
      flex: 1;
      min-width: 540px;
      padding-right: 20px;
      padding-bottom: 20px;
    }
    .right{
      padding-right: 20px;
      min-width: 540px;
      flex: 1;
      .right-top{
        padding-bottom: 20px;
      }
      .target{
        margin-top: 20px;
      }
      .btns{
        display: flex;
        align-items: center;
        height: 40px;
      }
    }
  }
</style>

